<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>企业微信管理后台</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../js/layui/css/layui.css">
    <link rel="stylesheet" href="../../js/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../js/bootstrap/js/bootstrap-table-master/bootstrap-table.min.css">
    <link rel="stylesheet" href="../../css/main.css">
</head>

<body>
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <div id="home">
        <div class="add-btn-wrapper">
            <button class="normal_btn" data-toggle="modal" data-target="#addShopModal">新增店铺</button>
            <div class="normal_btn import-cus-wrapper">导入店铺<input class="import-cus-input" type="file"
                    accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
            </div>
            <a class="download-template-btn">下载模板</a>
        </div>
        <div class="table-wrapper">
            <table class="layui-table" id="shop_table">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>店代码</th>
                        <th>店名称</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td class="shopId">DD001</td>
                        <td class="shopName">三菱蓝天店</td>
                        <td class="state use">可用</td>
                        <td>
                            <span class="edit">修改</span>
                        </td>
                        <input class="companyId" type="hidden" value="id0">
                        <input class="secret" type="hidden" value="secret0">
                        <input class="managerAccount" type="hidden">
                    </tr>
                    <tr>
                        <td>2</td>
                        <td class="shopId">DD002</td>
                        <td class="shopName">三菱炜坤店</td>
                        <td class="state use">可用</td>
                        <td>
                            <span class="edit">修改</span>
                        </td>
                        <input class="companyId" type="hidden" value="id1">
                        <input class="secret" type="hidden" value="secret1">
                        <input class="managerAccount" type="hidden">
                    </tr>
                </tbody>
            </table>
            <div id="paging"></div>
        </div>
    </div>

    <!-- 新增店铺Modal -->
    <div class="modal fade" id="addShopModal" tabindex="-1" role="dialog" aria-labelledby="addShopModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form class="layui-form">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="addShopModalLabel">新增</h4>
                    </div>
                    <div class="modal-body">
                        <div class="layui-form-item">
                            <label class="layui-form-label">店代码</label>
                            <div class="layui-input-block">
                                <input type="text" name="shopId" required lay-verify="required" placeholder="请输入店代码"
                                    autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">店名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="shopName" required lay-verify="required" placeholder="请输入店名称"
                                    autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">公司ID</label>
                            <div class="layui-input-block">
                                <input type="text" name="companyId" required lay-verify="required" placeholder="请输入公司ID"
                                    autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">企业secret</label>
                            <div class="layui-input-block">
                                <input type="text" name="secret" required lay-verify="required"
                                    placeholder="请输入企业应用secret" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">管理员帐号</label>
                            <div class="layui-input-block">
                                <input type="text" name="managerAccount" placeholder="请输入管理员帐号" autocomplete="off"
                                    class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-block">
                                <input type="radio" lay-filter="shopState" name="state" value="use" title="可用" checked>
                                <input type="radio" lay-filter="shopState" name="state" value="unuse" title="不可用">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn danger-bg" lay-submit lay-filter="addShopSubmit">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 修改店铺Modal -->
    <div class="modal fade" id="editShopModal" tabindex="-1" role="dialog" aria-labelledby="editShopModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form class="layui-form">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="editShopModalLabel">修改</h4>
                    </div>
                    <div class="modal-body">
                        <div class="layui-form-item">
                            <label class="layui-form-label">店代码</label>
                            <div class="layui-input-block">
                                <input type="text" name="editShopId" required lay-verify="required" placeholder="请输入店代码"
                                    autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">店名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="editShopName" required lay-verify="required"
                                    placeholder="请输入店名称" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">公司ID</label>
                            <div class="layui-input-block">
                                <input type="text" name="editCompanyId" required lay-verify="required"
                                    placeholder="请输入公司ID" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">企业secret</label>
                            <div class="layui-input-block">
                                <input type="text" name="editSecret" required lay-verify="required"
                                    placeholder="请输入企业应用secret" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-block">
                                <input type="radio" lay-filter="editShopState" name="editState" value="use" title="可用"
                                    checked>
                                <input type="radio" lay-filter="editShopState" name="editState" value="unuse"
                                    title="不可用">
                            </div>
                        </div>
                        <!-- 2020-02-10 Verson1.0 -->
                        <table class="layui-table" id="manager_account_table">
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>管理员帐号</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                        <!-- 2020-02-10 Verson1.0 -->
                        <div class="layui-btn add_account_btn danger-bg">新增管理员</div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn danger-bg" lay-submit lay-filter="editShopSubmit">修改</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 新增管理员帐号Modal -->
    <div class="modal fade" id="addManagerAccountModal" tabindex="-1" role="dialog" aria-labelledby="addManagerAccountLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form class="layui-form">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="addManagerAccountLabel">新增管理员帐号</h4>
                    </div>
                    <div class="modal-body">
                        <div class="layui-form-item">
                            <label class="layui-form-label">管理员帐号</label>
                            <div class="layui-input-block">
                                <input type="text" name="addManagerPhone" required lay-verify="phone" placeholder="请输入管理员帐号"
                                    autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn danger-bg" lay-submit lay-filter="addManagerAccountSubmit">修改</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- 新增管理员帐号Modal -->

    <!-- 修改管理员帐号Modal -->
    <div class="modal fade" id="editManagerAccountModal" tabindex="-1" role="dialog" aria-labelledby="editManagerAccountLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form class="layui-form">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="editManagerAccountLabel">修改</h4>
                    </div>
                    <div class="modal-body">
                        <div class="layui-form-item">
                            <label class="layui-form-label">管理员帐号</label>
                            <div class="layui-input-block">
                                <input type="text" name="editManagerPhone" required lay-verify="phone" placeholder="请输入管理员帐号"
                                    autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <!-- 2020-02-10 Verson1.0 -->
                        <div class="layui-form-item">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-block">
                                <input type="radio" lay-filter="memberState" name="memberState" value="可用" title="可用">
                                <input type="radio" lay-filter="memberState" name="memberState" value="不可用" title="不可用">
                            </div>
                        </div>
                        <!-- 2020-02-10 Verson1.0 -->
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn danger-bg" lay-submit lay-filter="editManagerAccountSubmit">修改</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- 修改管理员帐号Modal -->
    <script src="../../js/jquery-3.3.1.min.js"></script>
    <script src="../../js/layui/layui.js"></script>
    <script src="../../js/bootstrap/js/bootstrap.min.js"></script>
    <script src="../../js/bootstrap/js/bootstrap-table-master/bootstrap-table.min.js"></script>
    <script>
        // 实例化表单
        layui.use('form', function () {
            var form = layui.form;
            form.on('submit(addShopSubmit)', function (data) {
                let shopId = data.field.shopId; //店代码
                let shopName = data.field.shopName; //店名称
                let managerAccount = data.field.managerAccount; //管理员帐号
                let state = data.field.state; //店铺状态
                let companyId = data.field.companyId; //公司ID
                let secret = data.field.secret; //企业secret
                console.log(data.field);
                // $.ajax({
                // 	type: "POST",
                // 	url: "",
                // 	data: "",
                // 	//请求成功
                // 	success: function(data) {
                // 		console.log(data);
                // 	},
                // 	//请求失败，包含具体的错误信息
                // 	error: function(e) {
                // 		console.log(e.status);
                // 		console.log(e.responseText);
                // 	}
                // });
                return false;
            });
            // 将数组赋值给 管理者帐号隐藏域
            let arrmock = [{ id: 1, phone: '18975157865', state: '可用' }, { id: 2, phone: '18774507398', state: '不可用' }];
            $(".managerAccount").val(JSON.stringify(arrmock));
            //修改店铺 提交
            $(".edit").click(function () {
                let shopId = $(this).parent().siblings(".shopId").text();
                $("input[name=editShopId]").val(shopId);
                let shopName = $(this).parent().siblings(".shopName").text();
                $("input[name=editShopName]").val(shopName);
                let state = $(this).parent().siblings(".state").text();
                $("input[name=editState]").each(function () {
                    if ($(this).attr('title') == state) {
                        $(this).attr('checked', true);
                    }
                });
                let companyId = $(this).parent().siblings(".companyId").val();
                $("input[name=editCompanyId]").val(companyId);
                let secret = $(this).parent().siblings(".secret").val();
                $("input[name=editSecret]").val(secret);

                // 取到管理员隐藏域的数据 赋值给表格
                let managerList = JSON.parse($(this).parent().siblings(".managerAccount").val());
                let managerHtml = "";
                // 2020-02-10 Verson1.0
                for (let i = 0; i < managerList.length; i++) {
                    managerHtml += `
                    <tr>
                        <td>${i + 1}</td>
                        <td class="phone">${managerList[i].phone}</td>
                        <td class="state">${managerList[i].state}</td>
                        <td>
                            <span class="account_edit" data-id="${managerList[i].id}">修改</span>
                            <span class="account_delete" data-id="${managerList[i].id}">删除</span>
                        </td>
                    </tr>
                    `
                }
                // 2020-02-10 Verson1.0
                $("#manager_account_table tbody").html(managerHtml);
                // 删除 管理员帐号
                $("#manager_account_table tbody").on('click', '.account_delete', function () {
                    let id = $(this).attr('data-id');
                    console.log(id);
                    layer.confirm('确认删除该帐号吗？', {
                        btn: ['取消', '确认'] //按钮
                    }, function (index) {
                        layer.close(index);
                    }, function () {
                        // 确认删除操作
                        layer.msg('删除成功');
                    });
                })
                // 2020-02-10 Verson1.0
                // 修改 管理员帐号
                $("#manager_account_table tbody").on('click', '.account_edit', function () {
                    let id = $(this).attr('data-id');
                    let phone = $(this).parent().siblings('.phone').text();
                    let state = $(this).parent().siblings('.state').text();
                    console.log(id, phone, state);
                    $("input[name=editManagerPhone]").val(phone);
                    $("input[name=memberState]").each(function() {
                        if ($(this).val() == state) {
                            $(this).prop('checked', true)
                            form.render('radio')
                        }
                    })
                    $("#editManagerAccountModal").modal('show');
                })
                // 2020-02-10 Verson1.0
                form.render('radio');
                $("#editShopModal").modal('show');
            });
            // 打开新增管理员帐号模态框
            $(".add_account_btn").click(function() {
                $("#addManagerAccountModal").modal('show');
            })

            // 新增管理员帐号-提交
            form.on('submit(addManagerAccountSubmit)', function(data) {
                let phone = data.field.addManagerPhone;
                console.log(phone);
            })

            // 2020-02-10 Verson1.0
            // 修改管理员帐号-提交
            form.on('submit(editManagerAccountSubmit)', function(data) {
                let phone = data.field.editManagerPhone;
                let state = data.field.memberState;
                console.log(phone, state);
            })
            // 2020-02-10 Verson1.0

            // 修改店铺-提交
            form.on('submit(editShopSubmit)', function (data) {
                let shopId = data.field.editShopId; //店代码
                let shopName = data.field.editShopName; //店名称
                let managerAccount = data.field.editManagerAccount; //管理员帐号
                let managerPsw = data.field.editManagerPsw; //管理员密码
                let state = data.field.editState; //店铺状态
                console.log(data.field);
                // $.ajax({
                // 	type: "POST",
                // 	url: "",
                // 	data: "",
                // 	//请求成功
                // 	success: function(data) {
                // 		console.log(data);
                // 	},
                // 	//请求失败，包含具体的错误信息
                // 	error: function(e) {
                // 		console.log(e.status);
                // 		console.log(e.responseText);
                // 	}
                // });
                return false;
            });
            // 表格分页
            layui.use('laypage', function () {
                var laypage = layui.laypage;

                //执行一个laypage实例
                laypage.render({
                    elem: 'paging',
                    limit: 5,
                    theme: '#E51C23',
                    count: 20, //数据总数，从服务端得到
                    jump: function (obj, first) {
                        //obj包含了当前分页的所有参数，比如：
                        console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                        console.log(obj.limit); //得到每页显示的条数

                        //首次不执行
                        if (!first) {
                            //do something
                        }
                    }
                });
            });
        });

        // 导入客户excel
        $(".import-cus-input").bind('change', function (e) {
            let file = e.target.files[0];
            var formdata = new FormData();
            formdata.append('fileType', 'excel'); //文件格式
            formdata.append('fileType_file', file);
            formdata.append('method', 'upload');
            console.log('fileType_file', file);
        });
    </script>
</body>

</html>